<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"  content="width=device-width, initial-scale=1" />
<script src="js/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcss.com/touchjs/0.2.14/touch.js"></script>"
<title>无标题文档</title>
<style>
	body{
		width:100%;
		height:100%;
		margin: 0;
		bottom:0;
	}
	#pic_div div{float:left;}
	.ss{float:left;}
</style>
<script> 
     	$(function(){
     		touch.on('.target', 'swipeleft swiperight', function(ev){
    console.log("you have done", ev.type);
    alert();
});
     	
    function touches(ev){ 
        if(ev.touches.length==1){ 
            var oDiv=document.getElementById('div1'); 
            switch(ev.type){ 
                case 'touchstart': 
                    oDiv.innerHTML='Touch start('+ev.touches[0].clientX+', '+ev.touches[0].clientY+')'; 
                    ev.preventDefault();  //阻止出现滚动条 
                    break; 
                case 'touchend': 
                    oDiv.innerHTML='Touch end('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')'; 
                    break; 
                case 'touchmove': 
                    oDiv.innerHTML='Touch move('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')'; 
                    break; 
                 
            } 
        } 
    } 
    document.addEventListener('touchstart',touches,false); 
    document.addEventListener('touchend',touches,false); 
    document.addEventListener('touchmove',touches,false); 
    })
    </script>
</head>
<script>
	window.onload=function(){
	var aim=document.getElementById("aa");
	//aim.focus();
  }	
</script>

<body> 
  <div style="text-align:justify">
      <h3>这是一段测试代码</h3>
      <p>这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码</p>
  </div>
      <p >这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码</p>
  <div id="pic_div" style="width:50%;height:52px;border:1px solid red;overflow:auto;">
  	  <input type="text" id="aa" />
  	 <div style="width:200px;height:50px;border:1px solid red;margin:5px;" class="ss" >11</div>
  	 <div style="width:200px;height:50px;border:1px solid red;margin:5px;" class="ss">22</div>
  	 <div style="width:200px;height:50px;border:1px solid red;margin:5px;" class="ss">331</div>
  	 <div style="width:150px;height:50px;border:1px solid red;margin:5px;" class="ss">44</div>
  </div>   
  <div>
  	<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
  	
  </div>
  <div id="ss1" style="overflow: hidden;text-overflow: ellipsis;width:50px;height:100px;border:1px solid red;width:valve;
white-space:nowrap;">
  	这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码
  </div>
   <div>ontouchstart ontouchmove ontouchend ontouchcancle</div>
   <div>gesture事件 包括手指点击（click），轻拂（flick）,双击（double-click），手指的分开闭合（scale），转动（rotate）等一切手指能在屏幕上做的事情，
   	它只有在两根或多根手指在屏幕上的时候触发，事件处理函数中会得到一个GestureEvent类型的参数，它包含了手指的scale（两根移动过程中分开的比例）信息和rotation
   (两根手指间连线转动的角度)信息；这个事件是对touch事件的更高层的封装，和touch一样，它同样包括gestruestart,gesturechange,gestureend.
   gesture事件触发过程：
Step 1、第一根手指放下，触发touchstart
Step 2、第二根手指放下，触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动，持续触发gesturechange，就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起，触发gestureend，以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart！注意，多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart
Step 9、提起第一根手指，触发touchend
   </div>
   <div class="touchme" style="width:50px;height: 50px ;border:1px solid #285E8E;" id="div1" onclick="touches(this);">触屏事件</div>
    <div id="tap_test" style="width:50px;height:50px;border:1px solid red;">tap事件</div> 
    <div id="touch_test" style="width:50px;height:50px;border:1px solid red;">touch事件</div> 
    <script>
    	$(function(){
    		$("#tap_test").on("tap",function(){
    			alert(1);
    		$("#touch_test").on("touchstart",function(){
    			alert(2);
    			
    		})
    		});
    		
    	})
    	
    </script>
</body>
</html>
